<template>
  <div class="file-storage">
    <div class="page-header">
      <h1>文件存储</h1>
      <p>管理和组织您的文件，支持分类、搜索、上传和下载</p>
    </div>

    <div class="file-storage-content">
      <!-- 左侧分类管理 -->
      <div class="sidebar">
        <category-manager />
      </div>

      <!-- 右侧文件管理 -->
      <div class="main-content">
        <!-- 上传设置 -->
        <upload-settings v-if="isAdmin" />

        <!-- 文件上传区域 -->
        <file-upload v-if="isAdmin" />

        <!-- 文件列表 -->
        <file-list />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue'
import { useFileStorageStore } from '@/stores/fileStorage'
import { useUserStore } from '@/stores/user'
import CategoryManager from '@/components/FileStorage/CategoryManager.vue'
import FileUpload from '@/components/FileStorage/FileUpload.vue'
import FileList from '@/components/FileStorage/FileList.vue'
import UploadSettings from '@/components/FileStorage/UploadSettings.vue'

// 使用store
const fileStorageStore = useFileStorageStore()
const userStore = useUserStore()

// 计算属性
const isAdmin = computed(() => {
  return userStore.isAuthenticated && (userStore.user?.username === 'woaichitudouo' || userStore.user?.username === 'woaichitudou')
})

// 生命周期
onMounted(async () => {
  if (!fileStorageStore.initialized) {
    await fileStorageStore.initializeData()
  }
})
</script>

<style scoped>
.file-storage {
  height: 100vh;
  background: #f0f2f5;
  padding: 24px;
  padding-bottom: 160px;
  overflow-y: scroll;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.page-header p {
  font-size: 16px;
  color: #8c8c8c;
  margin: 0;
}

.file-storage-content {
  display: flex;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.main-content {
  flex: 1;
  min-width: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .file-storage-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .file-storage {
    padding: 16px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .page-header p {
    font-size: 14px;
  }
}
</style>
